<template>
  <div >
    <div class="display-table-div">
    <el-table
      :data="detailDataList"
       :class="{'display-table':true,'left-tabel':multipleSelect}"
       height="50vh"
       :stripe="true"
      :row-style="getRowStyle"
      :header-cell-style="header_cell_style"
    >
      <el-table-column
        v-if="showIndexColumn"
        type="index"
        label="#"
        align="center"
        width="80"
      ></el-table-column>
      <template v-for="propItem in detailPropList" :key="propItem.prop">
        <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
          <template #default="scope" v-if="propItem.codeMap">
            {{ formatCodeToLabel(scope.row[propItem.prop] || propItem.defaultValue ,propItem.codeMap) }}
          </template>
          <template #default="scope" v-else-if="propItem.timeStampFormat">
            {{ formatStampToTime(scope.row[propItem.prop],propItem.timeStampFormat) }}
          </template>
          <template #default="scope" v-else>
            {{ scope.row[propItem.prop] || propItem.defaultValue  }}
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作"  align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="success" size="small" @click="chooseClick(scope.row)">选择</el-button>
          </template>
        </el-table-column>
    </el-table>

    <el-table
      :data="returnInfoContainer"
      v-if="multipleSelect"
      ref="rightTabelRef"
       height="50vh"
       :stripe="true"
       class="display-table right-tabel"
      :row-style="getRowStyle"
      :header-cell-style="header_cell_style"
    >
      <el-table-column
        v-if="showIndexColumn"
        type="index"
        label="#"
        align="center"
        width="50"
      ></el-table-column>
      <template v-for="propItem in selectedPropList" :key="propItem.prop">
        <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
          <template #default="scope" v-if="propItem.codeMap">
            {{ formatCodeToLabel(scope.row[propItem.prop] || propItem.defaultValue ,propItem.codeMap) }}
          </template>
          <template #default="scope" v-else-if="propItem.timeStampFormat">
            {{ formatStampToTime(scope.row[propItem.prop],propItem.timeStampFormat) }}
          </template>
          <template #default="scope" v-else>
            {{ scope.row[propItem.prop] || propItem.defaultValue  }}
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作"  align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="warning" size="small" @click="deleteSelectedItem(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
  </div>

    <div class="footer" v-if="showFooter" :style="{justifyContent:multipleSelect?'apace-between':'center'}">
        <el-pagination
          popper-class="detailselect"
          v-model:current-page="page.currentPage"
          v-model:page-size="page.pageSize"
          :page-sizes="[10, 20, 100, 200]"
          layout="total, sizes, prev, pager, next"
          :total="detailDataConut||0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      <div class="footer-button" v-if="multipleSelect">
        <el-button type="warning" @click="clearAll">清空</el-button>
        <el-button type="primary" @click="emitMutipleSelectedData">确定({{returnInfoContainer.length||0}})</el-button>
      </div>
    </div>
  </div>
</template>
info
<script>
import { computed,ref } from "vue";
import moment from "moment";
export default {
  props: {
    multipleSelect:{//多选还是单选
      type:Boolean,
      require:false,
      default:false
    },
    detailDataList: {
      type: Array,
      required: true
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 1, pageSize: 10 })
    },
    detailPropList: {
      type: Array,
      required: true
    },
    detailDataConut: {
      type: Number,
      required: false,
      default:0
    },
    showIndexColumn: {
      type: Boolean,
      default: false
    },
    getRowStyle: {
      type: Function,
      default: ()=>{}
    },
    header_cell_style: {
      type: Object,
      default: ()=>({})
    },
    showFooter: {
      type: Boolean,
      default:true
    },
    allSelectedData:{//当前已选的数据
      type:Array,
      require:true,
      default:[]
    },
    selectedPropList:{//已选择表格的表格的列信息
      type:Array,
      require:false,
      default:[]
    },
  },
  emits: ['selectionChange', 'update:page','emitReturnInfo'],
  setup(props, { emit }) {
    const rightTabelRef =ref(null)
    const handleCurrentChange = (currentPage) => {
      emit('update:page', { ...props.page, currentPage })
    }
    const handleSizeChange = (pageSize) => {
      emit('update:page', { ...props.page, pageSize })
    }

    const returnInfoContainer = ref( JSON.parse(JSON.stringify( props.allSelectedData)))//给多选框提供的一个容器,存放选择的数据
    const chooseClick = (item)=>{
      //判断是单选还是多选
      if(props.multipleSelect){//多选只做了存放,并没有emit
        let exsitFlag = false
        for(let el of returnInfoContainer.value){
          if(Object.entries(el).toString() === Object.entries(item).toString()){
            exsitFlag = true
            break;
          }
        }
        !exsitFlag && returnInfoContainer.value.push(item)//执行这句时,数组内容变多,因此会渲染界面(table的高度因为新增了数据会变高),[渲染界面(table的高度变高)]加入微任务,
        //执行下面这句代码(将table的滑块拉到最下边)时是直接操作dom,属于同步代码,但是此时渲染界面(table的高度变高)还在微任务队列中,未执行,所以这句代码会执行,但是无效,
        //办法就是把这句同步代码,加入宏任务队列中.保证放到[渲染界面(table的高度变高)]后执行就行
        setTimeout(()=>{
          rightTabelRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0].scrollTop  = 99999999999999
        },0)
      }else{//单选直接将数据emit
        emit('emitReturnInfo',[item])
      }
    }
    //将数据提供给父组件
    const emitMutipleSelectedData = ()=>{
      emit('emitReturnInfo',returnInfoContainer.value)
    }
    //格式转换
    const formatCodeToLabel = computed(()=>{
      return (title,codemap) => {
              return codemap.find(item=>item.value===title)?.title||title
            }
    })
    const deleteSelectedItem =(i)=>{
      returnInfoContainer.value.splice(i,1)
    }
    const clearAll =()=>{
      returnInfoContainer.value=[]
    }
    
    //时间戳转换
    const formatStampToTime= computed(()=>{
      return (stamp,format="YYYY-MM-DD HH:mm:ss")=>{
                if (stamp == 0 || stamp == null || stamp == "")
                    return '未设置';
                return moment(stamp)
                    .locale("zh-cn")
                    .format(format);
            }
    })
    return {
      handleSizeChange,
      deleteSelectedItem,
      handleCurrentChange,
      formatCodeToLabel,
      formatStampToTime,
      chooseClick,
      returnInfoContainer,
      emitMutipleSelectedData,
      clearAll,
      rightTabelRef
    }
  }
};
</script>

<style scoped>
.display-table-div{
  display: flex;
}
.left-tabel{
  border-right: 1px solid rgb(204, 202, 202);
  width: 70%;
}
.right-tabel{
  width: 30%;
}
</style>
